<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
    在vuejs框架中绑定数据可以使用插值语法，也可以是用指令来完成
    指令：在html标签中可以使用的一个vuejs框架携带的标签属性，这些都是以v-开头

    v-text 从模型中取出数据，并且渲染到标签中。会替换文本中特殊符号
    v-html 从模型中取出数据，并且渲染到标签中。原样展示
    
    数据绑定
    1）插值、插值表达式 {{ data中数据名称 }}
    2) 指令
    在插值或指令中可进行一些简单的运算
    -->
    <div id="app">
        <p>{{ message }}</p>
        <p v-text="message"></p>
        <p v-html="message"></p>
        <hr>
        <p v-text="msg"></p>
        <p v-html="msg"></p>
        <hr>
        <p>&lt;a href="#"&gt;我的超链接&lt;/a&gt;</p>
        <p><a href="#">我的超链接</a></p>
        <hr>
        <p>{{ num + 5 }}</p>
        <p v-html="flag ? '成功' : '失败'"></p>
        <hr>
        <p v-text="msg1"></p>
        <p v-html="msg1"></p>
    </div>
    <script src="./assets/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                message: 'hello vuejs',
                msg: '<a href="#">超链接</a>',
                msg1:'&lt;a href="#"&gt;我的超链接&lt;/a&gt;',
                num: 100,
                flag: true
            }
        });
    </script>
</body>
</html>